<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>大家乐在线点餐系统</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">

  <link rel="stylesheet" href="../../dist/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../dist/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
  <link href="../../plugins/daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" href="../../css/admin.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.åjs"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
  <!-- 头部信息 -->
  <header class="main-header"></header>
  <!--  左侧导航 -->
  <aside class="main-sidebar"></aside>


  <!-- 内容区域 -->
  <div class="content-wrapper">
    <!-- 内容标题 -->
    <section class="content-header">
      <h1>
          订单概述             
      </h1>
      <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">门店管理</a></li>
        <li class="active">门店列表</li>
      </ol> -->
    </section>

    <!-- 内容区 -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <!-- /.box -->
          <div class="box">
            <div class="box-header solist">
                <div class="tab-content">
                    <div class="tabbable" id="user_tabs">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#panel2" data-toggle="tab">最近7天</a></li>
                            <li class=""><a href="#panel3" data-toggle="tab">最近一周</a></li>
                            <li class=""><a href="#panel4" data-toggle="tab">最近一月</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="panel2">
                                <div class="info_list">
                                    <div class="row">
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>下单笔数</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>待付款</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>待发货</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list brleft">
                                                <p>合计收入</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="panel3" contenteditable="false">
                                <div class="info_list">
                                    <div class="row">
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>下单笔数</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>待付款</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>待发货</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list brleft">
                                                <p>合计收入</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="panel4" contenteditable="false">
                                <div class="info_list">
                                    <div class="row">
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>下单笔数</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>待付款</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list">
                                                <p>待发货</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="four_list brleft">
                                                <p>合计收入</p>
                                                <p class="text-blue"><strong>0</strong></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>                           
            <!-- /.box-header -->
            
            <div class="box-body pd-top">
                <div class="row">
                    <div class="col-xs-12">
                        <div id="trend_chart" style="height:400px;width:1000px;border:1px solid;"></div>
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
          </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>

<script src="../../plugins/echarts2/echarts.min.js" type="text/javascript"></script>
<!-- DataTables -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<script src="../../dist/js/demo.js"></script>

<script type="text/javascript">
  var pageMenu = {"active": [3,11]};
   // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('trend_chart'),'macarons');                
    var option = {
    title : {
        text: '趋势图',
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['下单笔数','已付款','待发货']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['2016-06-27','2016-06-28','2016-06-29','2016-06-30','2016-07-01','2016-07-02','2016-07-03']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} 人'
            }
        }
    ],
    series : [
        {
            name:'下单笔数',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'已付款',
            type:'line',
            data:[1, 2, 4, 4, 8, 10, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        },{
            name:'待发货',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
                    
// 为echarts对象加载数据 
myChart.setOption(option);
</script>
<script src="../../js/vendors.js" type="text/javascript"></script>
<script src="../../js/index.js" type="text/javascript"></script>
<!-- page script -->
</body>
</html>

